<template>
    <div class="cate">
        <div class="cateBox">
            <brand>
                <brandItem :to="'/'">首页</brandItem>
                <!-- <transition name="bounce"> -->
                <brandItem>居家</brandItem>
                <!-- </transition> -->
            </brand>
        </div>

        <div class="cateBoxOne">
            <swiper :banner="banner"></swiper>
        </div>

        <div class="cate-three">
            <CateThreeView></CateThreeView>
        </div>


        <div class="cate-four">
            <CateFourView></CateFourView>
        </div>




    </div>
</template>

<script>
import brandItem from '@/components/utils/brand/BrandItem.vue'
import brand from '@/components/utils/brand/BrandView.vue'
import swiper from '../../components/utils/Swiperview'
import CateThreeView from '@/components/category/CateThreeView.vue'
import CateFourView from '@/components/category/CateFourView.vue'
import { getBanner } from '@/Api/homeapi'
export default {
    components: { brand, brandItem, swiper, CateThreeView, CateFourView },
    data() {
        return {
            banner: []
        }
    },
    methods: {
        async getBan() {
            let { data: res } = await getBanner(1)
            this.banner = res.result
        }
    },
    mounted() {
        this.getBan()
    }

}
</script>


<style lang="scss" >
.bounce-leave-active {
    animation: bounce-in .5s reverse;
}

@keyframes bounce-in {
    0% {
        transform: scale(0);
    }

    50% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

.cate {
    width: 100%;
    height: 100%;
    background: #f5f5f5;

    .cateBox {
        width: 1240px;
        height: 100%;
        margin: auto;
        font-size: 14px;
    }

    .cateBoxOne {
        width: 1240px;
        height: 500px;
        margin: auto;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .cate-three {
        width: 1240px;
        height: 260px;
        margin: auto;
        margin-top: 20px;
        margin-bottom: 20px;
        background: white;
    }

    .cate-four {
        width: 1240px;
        margin: auto;
    }

}

.prev {
    left: 20px !important;
}
</style>